<template>
    <div>
       <div class="search">
        <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音">
       </div>
       <div class="search-content" ref="search" v-show="keyword">
           <ul>
               <li class="search-item border-bottom"
                   v-for="item of list"
                   :key="item.id"
                   @click="handelCityClick(item.name)"
                >
                   {{item.name}}
               </li>
               <li class="search-item border-bottom"
                   v-show="hasNoData"
               >
                   没有匹配到数据
               </li>
           </ul>
       </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
   name: "CitySearch",
   props:{
       cities:Object
   },
   data () {
       return{
           keyword:'',
           list:[],
           timer:null
       }
   },
   computed: {
       //返回匹配的城市列表数组长度，让他为空时显示没有匹配到数据
       hasNoData() {
           return!this.list.length
       }
   },
   watch: {
       keyword () {
           //节流
           if(this.timer) {
               clearTimeout(this.timer)
           }
           this.timer=setTimeout(() => {
               //根据搜索信息获取相应的城市数据，然后加入到新数组中，在赋给list
               const result =[]
               for (let i in this.cities){
                   this.cities[i].forEach((value) => {
                       if (value.spell.indexOf(this.keyword) > -1||
                          value.name.indexOf(this.keyword) > -1) {
                           result.push(value)
                       }
                   })
               }
               this.list=result
           }, 100)
       }
   },
   methods:{
    //点击切换城市事件 commit是传到vux里的
      handelCityClick (city) {
        this.$store.commit('changeCity',city)
        this.$router.push('/')
      }
   },
   mounted () {
       //滚动效果
       this.scrol=new Bscroll(this.$refs.search)
   }
}
</script>

<style scoped>
.search{
    height: .72rem;
    padding: 0 .1rem;
    background:#00bcd4;
}
.search-input{
    box-sizing: border-box;
    width: 100%;
    height:.62rem;
    padding: 0 .1rem;
    line-height: .62rem;
    text-align: center;
    border-radius: .06rem;
    color: #666;
}
.search-content{
    z-index: 1;
    overflow: hidden;
    position: absolute;
    top: 1.58rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: #eee;
}
.search-item{
    line-height:.62rem;
    padding-left: .2rem;
    background: #fff;
    color: #666;
}
</style>